import React, { Component } from 'react';
import '../styles/Index/ShopCart.scss'
import * as service from "../api/index"

class ShopCart extends Component {
    constructor(props) {
        super(props);
        this.state = {
            goodlist: []
        }
    }
    async componentDidMount(){
        var res = await service.goodlist();
        this.setState({goodlist:res.data})
    }
    render() {
        return (
            <div className='shopcart'>
                <div className="title">购物车<span>管理</span></div>
                <div className="goodlist">
                    {
                        this.state.goodlist.map((item, index) => {
                            return (
                                <div className="item" key={index}>
                                    <div className="left">
                                        <input type="radio" />
                                    </div>
                                    <div className="right">
                                        <div className="shopname">{item.shopname} <span>＞</span></div>
                                        <div className="content">
                                            <div className="pic">
                                                <img src={item.pic} alt="" />
                                            </div>
                                            <div className="infro">
                                                <div className="top">
                                                    <div className="goodname">{item.goodname}</div>
                                                    <div className="color">{item.color} <span>＞</span></div>
                                                </div>
                                                <div className="bottom">
                                                    <div className="price">￥{item.price}.00</div>
                                                    <div className="sum">
                                                        <span className="sub">-</span>
                                                        <div className="num">{item.num}</div>
                                                        <span className="add">+</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
                <div className="foot">
                    <div className="left">
                        <input type="radio" />
                        <span>全选</span>
                    </div>
                    <div className="right">
                        <span className='total'>总计：</span>
                        <span className="price">￥0.00</span>
                        <span className="btn">去结算(0)</span>
                    </div>
                </div>
            </div>
        );
    }
}

export default ShopCart;